<template>
    <div id="user">
        <div class="user_body">
            <div class="user_info_title">Gitee信息</div>
            <div class="user_info" v-if="userInfo">
                <div class="user_head">
                    <el-image class="xiaomi" :src="userInfo.avatar_url" fit="fill"></el-image>
                </div>
                <a :href="userInfo.html_url" target="_blank" class="user_name">{{userInfo.name}}</a>
                <div class="user_remark">{{userInfo.bio}}</div>
                <div class="user_info_more">
                    <div class="user_info_item">
                        <div class="user_info_value">{{userInfo.followers}}</div>
                        <div class="user_info_key">粉丝</div>
                    </div>
                    <div class="user_info_item">
                        <div class="user_info_value">{{userInfo.following}}</div>
                        <div class="user_info_key">关注</div>
                    </div>
                    <div class="user_info_item">
                        <div class="user_info_value">{{userInfo.stared}}</div>
                        <div class="user_info_key">Star</div>
                    </div>
                    <div class="user_info_item">
                        <div class="user_info_value">{{userInfo.watched}}</div>
                        <div class="user_info_key">Watch</div>
                    </div>
                </div>
            </div>
            <div class="user_info repo_info" v-if="orgInfo">
                <div class="user_head">
                    <el-image class="xiaomi" :src="orgInfo.avatar_url" fit="cover"></el-image>
                </div>
                <a :href="'https://gitee.com/'+orgInfo.login" target="_blank" class="user_name">{{orgInfo.name}}</a>
                <div class="user_remark">{{orgInfo.description}}</div>
                <div class="user_members">
                    <div class="user_members_title">组织成员<span v-if="memberList">({{memberList.length}})</span></div>
                    <div class="user_members_item" v-for="(item,index) in memberList">
                        <div class="user_members_item_body" @click="openUserPage(item)">
                            <el-image class="xiaomi" :src="item.avatar_url" fit="cover"></el-image>
                        </div>
                    </div>
                </div>
            </div>
            <div class="user_repo_title">开源仓库列表<span v-if="userInfo">({{userInfo.public_repos}})</span></div>
            <div class="user_repos" @scroll="repoScroll">
                <router-link :to="'/'+item.full_name" class="user_repos_item" v-for="(item,index) in repoList">
                    <div class="user_repos_body">
                        <div class="user_repo_update"><i
                                class="iconfont icon-time"></i>{{friendlyTime(item.updated_at)}}</div>
                        <div class="user_repos_name">{{item.human_name}}</div>
                        <div class="user_repos_desc">{{item.description}}</div>
                        <div class="user_repos_more">
                            <div class="user_repos_star user_repos_more_item" title="Stars">
                                <i class="iconfont icon-star-fill"></i>{{item.stargazers_count}}
                            </div>
                            <div class="user_repos_watch user_repos_more_item" title="Watches">
                                <i class="iconfont icon-eye-fill"></i>{{item.watchers_count}}
                            </div>
                            <div class="user_repos_fork user_repos_more_item" title="Forks">
                                <i class="iconfont icon-USB-fill"></i>{{item.forks_count}}
                            </div>
                        </div>
                    </div>
                </router-link>
                <div class="user_repos_tips" v-if="repoList.length==0">
                    <div class="user_repos_tips_body">
                        <i class="iconfont icon-info"></i>
                        {{loading_tips}}
                    </div>
                </div>
            </div>
        </div>
        <div class="user_footer">
            <div class="user_footer_item" v-if="userInfo">
                <i class="iconfont icon-time"></i>最后活跃 {{friendlyTime(userInfo.updated_at)}}
            </div>
            <div class="user_footer_item" v-if="orgInfo">
                粉丝 <font color="yellow">{{orgInfo.follow_count}}</font>
            </div>
            <div class="user_footer_item" v-if="userInfo">
                @{{userInfo.company}} {{userInfo.profession}}
            </div>
            <div class="user_footer_right">
                <div class="user_footer_item" v-if="userInfo">
                    博客 <a :href="userInfo.blog" target="_blank">{{userInfo.blog}}</a>
                </div>
                <div class="user_footer_item">
                    By <router-link to="/">Gitee.Info</router-link>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>
<script>
    import request from "@/lib/request";
    export
        default {
            data() {
                return {
                    loading_repos: false,
                    loading_tips: "读取数据中",
                    login: "",
                    type: "",
                    userInfo: false,
                    orgInfo: false,
                    repoList: [],
                    memberList: [],
                    page: 1
                }
            },
            created() {
                this.login = location.pathname.replace("/", "");
                console.log(this.login);
                this.getUserInfo();
            },
            watch: {
                $route(to, from) {
                    this.login = to.path.replace("/", "");
                    this.getUserInfo();
                }
            },
            methods: {
                openUserPage(e) {
                    this.login = e.login;
                    this.$router.push('/' + this.login);
                },
                repoScroll(e) {
                    if (e.target.scrollTop + e.target.clientHeight + 30 > e.target.scrollHeight) {
                        if (!this.loading_repos) {
                            this.page++;
                            this.getRepoList();
                        }
                    }
                },
                getRepoList() {
                    let that = this;
                    if (!that.login) {
                        that.$router.push('/');
                        return;
                    }
                    if (that.loading_repos) {
                        return;
                    }
                    that.loading_repos = true;
                    that.loading_tips = "读取数据中";
                    request({
                        url: that.type + "/" + that.login + "/repos?type=all&sort=pushed&page=" + that.page + "&per_page=18",
                        loading: true,
                        method: "GET",
                        data: {
                        },
                        success(res) {
                            if (that.page > 1) {
                                that.repoList = that.repoList.concat(res);
                            } else {
                                if (res.length == 0) {
                                    that.loading_tips = "没有查询到用户的仓库";
                                }
                                that.repoList = res;
                            }
                            that.$nextTick(function () {
                                that.loading_repos = false;
                            });
                        }
                        , error(res) {
                            that.loading_tips = "没有查询到用户的仓库";
                            that.$message.error("没有查询到用户的仓库");
                            that.loading_repos = false;
                        }
                    });
                },
                getOrgInfo() {
                    let that = this;
                    if (!that.login) {
                        that.$router.push('/');
                        return;
                    }
                    request({
                        url: "orgs/" + that.login,
                        loading: true,
                        method: "GET",
                        data: {
                        },
                        success(res) {
                            that.orgInfo = res;
                            that.page = 1;
                            that.type = "orgs";
                            that.getRepoList();
                            that.getMemberList();
                        }
                        , error(res) {
                            that.$message.error("没有查询到指定的组织信息");
                            setTimeout(function () {
                                that.$router.push('/');
                            }, 3000)
                        }
                    });
                },
                getMemberList() {
                    let that = this;
                    if (!that.login) {
                        that.$router.push('/');
                        return;
                    }
                    request({
                        url: "orgs/" + that.login + "/members?page=1&per_page=100&role=all",
                        loading: true,
                        method: "GET",
                        data: {
                        },
                        success(res) {
                            that.memberList = res;
                        }
                        , error(res) {
                            that.$message.error("没有查询到组织成员信息");
                        }
                    });
                },
                getUserInfo() {
                    let that = this;
                    if (!that.login) {
                        that.$router.push('/');
                        return;
                    }
                    that.userInfo = false;
                    that.orgInfo = false;
                    that.repolist = [];
                    that.memberList = [];
                    request({
                        url: "users/" + that.login,
                        loading: true,
                        method: "GET",
                        data: {
                        },
                        success(res) {
                            that.userInfo = res;
                            that.page = 1;
                            that.type = "users";
                            that.getRepoList();
                        }
                        , error(res) {
                            that.getOrgInfo();
                        }
                    });
                }
            }
        }
</script>
<style>
    .user_body {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 30px;
        border-radius: 20px;
        padding: 20px;
    }


    .user_info_title {
        font-size: 16px;
        position: absolute;
        left: 15px;
        top: 10px;
        font-weight: bold;
        border-bottom: 3px solid #333;
    }

    .user_info {
        position: absolute;
        left: 10px;
        top: 45px;
        height: 250px;
        width: 210px;
        text-align: center;
        padding-top: 20px;
        background-color: #222;
        border-radius: 10px;
    }

    .repo_info {
        height: 170px;
    }

    .user_info .user_head img {
        width: 80px;
        height: 80px;
        border-radius: 10px;
    }

    .user_info .user_name {
        font-size: 16px;
        margin-top: 10px;
        text-decoration: none;
        color: #fff;
        display: inline-block;
    }

    .user_info .user_remark {
        font-size: 12px;
        margin-top: 5px;
        color: #666;
        padding: 0px 10px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        /* autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        margin-top: 5px;
        height: 36px;
        text-align: left;
    }

    .user_info .user_members {
        margin-top: 25px;
        text-align: left;
        background-color: #222;
        border-radius: 10px;
        padding: 10px;
    }

    .user_members_title {
        text-align: left;
        font-size: 14px;
        padding: 3px 5px;
        margin-bottom: 5px;
    }

    .user_members_item {
        display: inline-block;
        width: 20%;
        vertical-align: top;
    }

    .user_members_item_body {
        padding: 2px;
        cursor: pointer;
    }

    .user_members_item_body img {
        width: 32px;
        height: 32px;
    }


    .user_info_more {
        text-align: center;
        font-size: 0;
        margin-top: 30px;
    }

    .user_info_item {
        display: inline-block;
        width: 25%;
        padding: 0;
        margin: 0;
        font-size: 12px;
        color: #666;
        cursor: pointer;
    }

    .user_info_item:hover {
        color: yellow !important;
    }

    .user_info_value {
        font-size: 16px;
        color: #ccc;
    }

    .user_repos {
        position: absolute;
        left: 225px;
        top: 40px;
        bottom: 5px;
        right: 5px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .user_repos_item {
        display: inline-block;
        width: 33.3333333333333%;
        vertical-align: top;
        color: #ccc;
        text-decoration: none;
    }
    .user_repo_title {
        font-size: 16px;
        position: absolute;
        left: 235px;
        top: 10px;
        font-weight: bold;
        border-bottom: 3px solid #333;
    }

    .user_repo_title span {
        color: yellow;
    }

    .user_repos_body {
        background-color: #252525;
        padding: 10px 15px;
        margin: 5px;
        vertical-align: top;
        border-radius: 10px;
        cursor: pointer;
        overflow: hidden;
        position: relative;
    }

    .user_repos_body:hover {
        background-color: #282828;
    }

    .user_repos_name {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 50px;

    }

    .user_repos_desc {
        font-size: 12px;
        color: #666;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        /* autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        margin-top: 5px;
        height: 48px;
    }

    .user_repo_update {
        position: absolute;
        right: 10px;
        top: 15px;
        font-size: 12px;
        color: #444;
    }

    .user_repo_update * {
        vertical-align: middle;
    }

    .user_repos_more * {
        vertical-align: middle;
    }

    .user_repos_more_item {
        margin-right: 5px;
    }

    .user_repos_star {
        font-size: 12px;
        color: #666;
        margin-top: 20px;
        display: inline-block;
    }

    .user_repos_watch {
        font-size: 12px;
        color: #666;
        margin-top: 20px;
        display: inline-block;
    }

    .user_repos_fork {
        font-size: 12px;
        color: #666;
        margin-top: 20px;
        display: inline-block;
    }

    .user_repos_tips {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #666;
        font-size: 14px;
    }

    .user_repos_tips .iconfont {
        display: block;
        font-size: 48px;
        margin-bottom: 10px;
        font-weight: 200;
    }

    .user_footer {
        background-color: #0075c3;
        position: absolute;
        left: 0;
        right: 0;
        height: 28px;
        line-height: 28px;
        bottom: 0;
        font-size: 12px;
        padding: 0px 10px;
        color: white;
    }

    .user_footer_item {
        display: inline-block;
        cursor: pointer;
        padding: 0px 5px;
        vertical-align: middle;
    }

    .user_footer_item:hover {
        background-color: #2e97dd;
    }

    .user_footer_item .iconfont {
        display: inline-block;
        font-size: 12px;
    }

    .user_footer a {
        color: white;
        text-decoration: none;
    }

    .user_footer a:hover {
        color: yellow;
    }

    .user_footer_right {
        position: absolute;
        right: 10px;
        top: 0;
        bottom: 0;
    }
</style>